<template>
	<view class="page_wrapper page_bg">
		<Navbar title="口算出题" />
		<view class="pagebox">
			<view class="page_title">
				请根据需要配置生成参数
			</view>
			<view class="conditions_block">
				<view class="conditions_wrapper">
					<view class="row_block">
						<view class="con_title">计算数1 范围</view>
						<view class="row_val">
							<CustomSlider :value="examForm.firstNum" style="width: 100%;" 
							:min="10" :max="100" :btnInit="btnInit.firstNum"
								@checkedValue="updateValueFirst" @updateValue="updateFirst" />
						</view>
						<view style="width: 60rpx;">{{examForm.firstNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">计算数2 范围</view>
						<view class="row_val">
							<CustomSlider :value="examForm.secondNum" style="width: 100%;" :min="10" :max="100"
								:btnInit="btnInit.secondNum" @checkedValue="updateValueSecond" @updateValue="updateSecond" />
						</view>
						<view style="width: 60rpx;">{{examForm.secondNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">结果值 范围</view>
						<view class="row_val">
							<CustomSlider :value="examForm.resultNum" style="width: 100%;" :min="10" :max="100"
								:btnInit="btnInit.resultNum" @checkedValue="updateValueResult" @updateValue="updateResult" />
						</view>
						<view style="width: 60rpx;">{{examForm.resultNum}}</view>
					</view>
					<view class="row_block">
						<view class="con_title">生成试题数量</view>
						<view class="row_val">
							<CustomSlider :value="examForm.calcTotalCount" style="width: 100%;" :min="10" :max="60"
								:btnInit="btnInit.calcTotalCount" @checkedValue="updateValueCount" @updateValue="updateCount"></CustomSlider>
						</view>
						<view style="width: 60rpx;">{{examForm.calcTotalCount}}</view>
					</view>
					<view class="calctypebox">
						<view>计算类型</view>
						<view class="row_val">
							<view class="calc_types">
								<view class="calcType_item" v-for="(calcType, index) in calcTypes" :key="calcType.name"
									>
									<u-tag v-if="calcType.checked" bgColor="#2E996C" color="#ffffff"
										shape="circle" @click="calcTypeChange(index)">{{calcType.title}}</u-tag>
									<u-tag v-else bgColor="#D4F5D2" shape="circle"
										color="#50974B" @click="calcTypeChange(index)">{{calcType.title}}</u-tag>
								</view>
							</view>
						</view>
					</view>
					<view class="calctypebox">
						<view class="con_title">计算难度:</view>
						<view class="row_val">
							<view class="diff_types">
								<view class="difficultType" v-for="(difficultType, index) in difficultTypes"
									:key="difficultType.name" >
									<u-tag v-if="difficultType.checked" bgColor="#2E996C" color="#ffffff"
										shape="circle" @click="difficultTypeChange(index)">{{difficultType.name}}</u-tag>
									<u-tag v-else bgColor="#D4F5D2" shape="circle"
										color="#50974B" @click="difficultTypeChange(index)">{{difficultType.name}}</u-tag>
								</view>
							</view>
						</view>
					</view>
				</view>
			
				<view class="set_btns_block">
					<view class="block_title">常用配置参数:</view>
					<view class="set_btns_box">
						<view v-for="(con, index) in setList" :key="index" class="condition_block">
							<u-tag  @click="changeCondition(con)" shape="circle" bgColor="#D4F5D2" color="#50974B">{{con.name}}</u-tag>
						</view>
					</view>
				</view>
			</view>
			
			<view class="bottom_btns_block">
				<view type="primary" plain class="preview_btn" @click="previewExam">生成试题</view>
			</view>
		</view>
		<image class="page_bg_img" src="../../static/nimg/bg.png" mode=""></image>
	</view>
</template>

<script>
	import {
		createPad
	} from '../../utils/create.js'
	import {
		request
	} from '@/utils/request.js'
	import {
		storageData
	} from '@/utils/storageData.js'
	import CustomSlider from "@/components/customSlider.vue"
	import Navbar from '@/components/navbar.vue'
	export default {
		components: {
			CustomSlider,
			Navbar
		},
		data() {
			return {
				loading: false,
				maxNum: 100,
				minNum: 10,
				stepCount: 10,
				btnInit:{},
				examForm: {
					firstNum: 20,
					secondNum: 20,
					resultNum: 20,
					calcTotalCount: 40,
					selectCalcTypes: ['+'],
					difficultTypes: []
				},
				calcTypes: [{
						title: '加法',
						name: '+',
						checked: true
					},
					{
						title: '减法',
						name: '-',
						checked: false
					},
					{
						title: '乘法',
						name: '*',
						checked: false
					},
					{
						title: '除法',
						name: '/',
						checked: false
					}
				],
				difficultTypes: [{
						name: '计算值不为0',
						checked: false
					},
					{
						name: '计算值不为1',
						checked: false
					},
					{
						name: '得数不为0',
						checked: false
					},
					{
						name: '得数不为1',
						checked: false
					}
				],
				mathExamId: 0,
				imgurl: "https://www.hzif.cn/mathematics-attach/",
				mathCalcList: [],
				setList: [{
						"name": "10以内加减法20道",
						"firstNum": 10,
						"secondNum": 10,
						"resultNum": 10,
						"calcTotalCount": 20,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": ['计算值不为0', '得数不为0']
					},
					{
						"name": "20以内加减法40道",
						"firstNum": 20,
						"secondNum": 20,
						"resultNum": 20,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": ['计算值不为0', '得数不为0']
					},
					{
						"name": "50以内加减法40道",
						"firstNum": 50,
						"secondNum": 50,
						"resultNum": 50,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": ['计算值不为0', '得数不为0']
					},
					{
						"name": "100以内加减法40道",
						"firstNum": 100,
						"secondNum": 100,
						"resultNum": 100,
						"calcTotalCount": 40,
						"selectCalcTypes": ["+", "-"],
						"difficultTypes": ['计算值不为0', '得数不为0']
					},
					{
						"name": "九九乘法表20道",
						"firstNum": 10,
						"secondNum": 10,
						"resultNum": 100,
						"calcTotalCount": 20,
						"selectCalcTypes": ["*"],
						"difficultTypes": []
					}
				],
				setData: {
					title: '',
					// examForm里的属性
				}
			}
		},
		onLoad(option) {
			this.btnInit = Object.assign({},this.examForm)
		},
		methods: {
			fetchSetList() {
				const wechatOpenId = getApp().globalData.wechatOpenId

			},
			updateValueFirst(e) {
				this.examForm.firstNum = e || e.detail.value
			},
			updateValueSecond(e) {
				this.examForm.secondNum = e || e.detail.value
			},
			updateValueResult(e) {
				this.examForm.resultNum = e || e.detail.value
			},
			updateValueCount(e) {
				this.examForm.calcTotalCount = e || e.detail.value
			},
			updateFirst(e) {
				this.examForm.firstNum = e || e.detail.value
			},
			updateSecond(e) {
				this.examForm.secondNum = e || e.detail.value
			},
			updateResult(e) {
				this.examForm.resultNum = e || e.detail.value
			},
			updateCount(e) {
				this.examForm.calcTotalCount = e || e.detail.value
			},
			previewExam() {
				console.log(this.examForm)
				this.loading = true
				const data = JSON.parse(JSON.stringify(this.examForm))
				this.examForm.name = null
				data.selectCalcTypes = []
				this.calcTypes.forEach(item => {
					if (item.checked) {
						data.selectCalcTypes.push(item.name)
					}
				})
				data.difficultTypes = []
				this.difficultTypes.forEach(item => {
					if (item.checked) {
						data.difficultTypes.push(item.name)
					}
				})
				uni.showLoading()
				let arr = createPad(data)
				uni.setStorageSync('test_id',JSON.stringify(arr))
				uni.hideLoading()
				uni.navigateTo({
					url: '/pages/mathCalcs/mathCalcs?examId=' + 'test_id'+'&ten=1'
				})
			},
			calcTypeChange(index) {
				this.calcTypes[index].checked = !this.calcTypes[index].checked
			},

			difficultTypeChange(index) {
				this.difficultTypes[index].checked = !this.difficultTypes[index].checked
			},
			changeCondition(con) {
				
				this.examForm = JSON.parse(JSON.stringify(con))
				this.btnInit = Object.assign({},this.examForm)
				// 计算类型
				for (let i = 0; i < this.calcTypes.length; i++) {
					this.$set(this.calcTypes[i], 'checked', this.examForm.selectCalcTypes.indexOf(this.calcTypes[i]
						.name) >= 0 ? true : false)
				}
				// 计算难度
				this.difficultTypes.forEach(item => {
					item.checked = this.examForm.difficultTypes.indexOf(item.name) >= 0 ? true : false
				})
				this.$forceUpdate()
			},
			saveSet() {
				const $this = this
				uni.showModal({
					title: '请给当前设置起个名字吧:',
					editable: true,
					success: function(res) {
						if (res.confirm) {
							const title = res.content
							const valMap = JSON.parse(JSON.stringify($this.examForm))
							valMap.title = title
							$this.setList.push(valMap)

							const wechatOpenId = getApp().globalData.wechatOpenId
							uni.showLoading()
							// request.postJson( 
							// 	'/mathSetConditions', 
							// 	{
							// 		wechatOpenId: wechatOpenId,
							// 		condition: JSON.stringify(valMap)
							// 	}
							// ).then(res => {
							// 	uni.hideLoading()
							// 	uni.showToast({
							// 		icon: 'none',
							// 		title: '保存成功'
							// 	})
							// }).catch(err => {
							// 	uni.hideLoading()
							// 	console.log(err)
							// })

							// storageData.saveDataJSON('setList', $this.setList)
						}
					}
				})
			},

			showMySetList() {
				const titleList = this.setList.map(obj => obj.title)
				if (titleList.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '暂无常用设置'
					})
					return false
				}
				const $this = this
				uni.showActionSheet({
					itemList: titleList,
					success: function(res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						$this.examForm = $this.setList[parseInt(res.tapIndex + '')]

						// 计算类型
						$this.calcTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.selectCalcTypes.forEach((item) => {
							$this.calcTypes.forEach((type) => {
								if (item === type.name) {
									type.checked = true
								}
							})
						})

						// 计算难度
						$this.difficultTypes.forEach((type) => {
							type.checked = false
						})
						$this.examForm.difficultTypes.forEach((item) => {
							$this.difficultTypes.forEach((type) => {
								if (item === type.name) {
									type.checked = true
								}
							})
						})

					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.u-tag{
		border-color:rgba(0, 0, 0, 0) !important;
		justify-content: center;
		height: 65rpx !important;
	}
	.page_wrapper {
		
		
		.page_title {
			font-size: 30rpx;
			font-weight: 400;
			height: 60px;
			color: #074f1e;
			display: flex;
			align-items: center;
			margin: 0 20rpx;
		}

		.conditions_block {
			flex: 1;
			overflow-y: scroll;
			// margin-left: 15px;
			// margin-right: 15px;

			.conditions_wrapper {
				padding-top: 10px;
				padding-bottom: 10px;
				border-radius: 8px;
				background: #C4E6C2;
				color: #074F1E;
				font-size: 28rpx;
				font-weight: 400;

				.calctypebox {
					padding: 0 30rpx;
					display: flex;
					flex-direction: column;
					row-gap: 20rpx;
					margin-bottom: 20rpx;
				}
				.row_val {
					// flex: 1;
					display: flex;
					// margin-bottom: 10px;
				
					.slider_val {
						width: 100%;
					}
				
					.calc_types {
						display: grid;
						grid-template-columns: repeat(4,1fr);
						grid-column-gap: 20rpx;
						justify-items: center;
						.calcType_item{
							width: 140rpx;
							height: 65rpx;
						}
						
					}
					.diff_types{
						display: grid;
						grid-template-columns: repeat(2,1fr);
						grid-row-gap: 20rpx;
						justify-items: center;
						grid-column-gap: 20rpx;
						.difficultType{
							width: 290rpx;
							height: 65rpx;
						}
					}
					
				}

				.row_block {
					display: flex;
					justify-content: space-around;
					align-items: center;
					// padding-right: 50rpx;
					padding-left: 10rpx;

					.con_title {
						width: 100px;
						text-align: justify-all;
						text-align-last: justify;
						display: inline-block;
						// display: flex;
						justify-content: flex-end;
						align-items: center;
					}
				}
			}

			.set_btns_block {
				display: flex;
				flex-direction: column;
				
				.block_title {
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 20px;
					padding-bottom: 15px;
					color: #074F1E;
				}
				.set_btns_box{
					background-color: #C4E6C2;
					border-radius: 20rpx;
					padding: 40rpx 20rpx;
					display: grid;
					grid-template-columns: repeat(2,1fr);
					grid-row-gap: 20rpx;
					grid-column-gap: 20rpx;
					justify-items: center;
				}

				.condition_block {
					// margin-bottom: 15px;
					// padding: 10px;
					width: 290rpx;
					height: 65rpx;
					border-radius: 6px;
				}

				.condition_block:active {
					// background-color: orange;
				}

			}
		}

		.bottom_btns_block {
			.preview_btn {
				width: 100%;
				height: 98rpx;
				color: white;
				background-color:#2E996C;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
			}
		}
	}
</style>